<template>
  <div class="login-container" :class="{ 'dark': isDark }">
    <!-- 动态波浪背景 -->
    <div class="wave-background">
      <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="url(#gradient1)" fill-opacity="0.5" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        <defs>
          <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#409eff;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#5352ed;stop-opacity:1" />
          </linearGradient>
        </defs>
      </svg>
      <svg class="wave wave2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="url(#gradient2)" fill-opacity="0.3" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,213.3C672,224,768,224,864,208C960,192,1056,160,1152,165.3C1248,171,1344,213,1392,234.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        <defs>
          <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
          </linearGradient>
        </defs>
      </svg>
    </div>

    <!-- 漂浮粒子 -->
    <div class="particles-container">
      <div class="particle" v-for="n in 20" :key="n" :style="getParticleStyle(n)"></div>
    </div>

    <!-- 右上角主题切换 -->
    <div class="theme-toggle">
      <el-button class="theme-btn" circle @click="toggleTheme">
        <el-icon>
          <transition name="icon-fade" mode="out-in">
            <component :is="isDark ? 'Sunny' : 'Moon'" :key="isDark ? 'sun' : 'moon'" />
          </transition>
        </el-icon>
      </el-button>
    </div>

    <!-- 中央内容区 -->
    <div class="login-wrapper">
      <!-- 左侧功能特性展示 - 3D轮播 -->
      <div class="features-showcase">
        <div class="carousel-3d">
          <div
            class="feature-card"
            v-for="(feature, index) in features"
            :key="index"
            :class="{ active: currentCardIndex === index }"
            :style="getCardStyle(index)"
          >
            <div class="feature-icon">
              <el-icon><component :is="feature.icon" /></el-icon>
            </div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.desc }}</p>
          </div>
        </div>
      </div>

      <!-- 右侧登录卡片 -->
      <div class="login-card">
        <!-- 顶部Logo和标题 -->
        <div class="card-header">
          <div class="logo-container">
            <Logo :size="60" class="logo" :color="logoColor" />
            <div class="logo-ripple"></div>
            <div class="logo-ripple ripple-delay"></div>
          </div>
          <h1 class="title">{{ settings.title }}</h1>
          <p class="subtitle">开箱即用的企业级中后台解决方案</p>
        </div>

        <!-- 登录方式切换 -->
        <div class="login-mode-switch">
          <div
            class="mode-item"
            :class="{ active: loginType === 'account' }"
            @click="switchLoginType('account')"
          >
            <el-icon><User /></el-icon>
            <span>账号登录</span>
          </div>
          <div
            class="mode-item"
            :class="{ active: loginType === 'qrcode' }"
            @click="switchLoginType('qrcode')"
          >
            <el-icon><QrCode /></el-icon>
            <span>扫码登录</span>
          </div>
          <div class="mode-slider" :class="{ 'slide-right': loginType === 'qrcode' }"></div>
        </div>

        <!-- 登录表单区域 -->
        <transition name="form-slide" mode="out-in">
          <!-- 账号登录 -->
          <el-form
            v-if="loginType === 'account'"
            key="account"
            ref="loginFormRef"
            :model="loginForm"
            :rules="rules"
            @keyup.enter="handleLogin"
            class="login-form"
          >
            <el-form-item prop="username">
              <div class="input-wrapper">
                <el-icon class="input-icon"><User /></el-icon>
                <el-input
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  class="custom-input"
                />
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <div class="input-wrapper">
                <el-icon class="input-icon"><Lock /></el-icon>
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  show-password
                  class="custom-input"
                />
              </div>
            </el-form-item>

            <el-form-item>
              <slider-captcha ref="sliderCaptchaRef" @success="handleSliderSuccess" />
            </el-form-item>

            <div class="form-footer">
              <el-checkbox v-model="rememberMe" class="remember-checkbox">
                记住我
              </el-checkbox>
              <a href="#" class="forget-link">忘记密码？</a>
            </div>

            <el-button
              :loading="loading"
              type="primary"
              class="login-btn"
              @click="handleLogin"
            >
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form>

          <!-- 扫码登录 -->
          <div v-else key="qrcode" class="qrcode-container">
            <div class="qrcode-box">
              <div class="qrcode-frame">
                <div class="corner top-left"></div>
                <div class="corner top-right"></div>
                <div class="corner bottom-left"></div>
                <div class="corner bottom-right"></div>
                <img :src="qrCodeUrl" alt="二维码" class="qrcode-image" />
                <div class="scan-line"></div>

                <transition name="fade">
                  <div class="qrcode-expired" v-if="qrCodeExpired">
                    <el-icon class="expired-icon"><Warning /></el-icon>
                    <p>二维码已过期</p>
                    <el-button type="primary" size="small" @click="refreshQrCode" round>
                      <el-icon><RefreshRight /></el-icon>
                      刷新
                    </el-button>
                  </div>
                </transition>
              </div>
              <div class="qrcode-tips">
                <el-icon class="tip-icon"><Iphone /></el-icon>
                <span>请使用手机App扫码登录</span>
              </div>
            </div>
          </div>
        </transition>

        <!-- 社交登录 -->
        <div class="social-login">
          <div class="divider-line">
            <span>其他登录方式</span>
          </div>
          <div class="social-buttons">
            <div class="social-btn qq" @click="handleSocialLogin('qq')" title="QQ登录">
              <svg-icon name="qq" :size="24" colorful hover-color="#12b7f5"></svg-icon>
            </div>
            <div class="social-btn gitee" @click="handleSocialLogin('gitee')" title="Gitee登录">
              <svg-icon name="gitee" :size="24" colorful hover-color="#c71d23"></svg-icon>
            </div>
            <div class="social-btn wechat" @click="handleSocialLogin('wechat')" title="微信登录">
              <svg-icon name="wechat" :size="24" colorful hover-color="#09bb07"></svg-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部版权信息 -->
    <footer class="login-footer">
      <div class="footer-content">
        <p>Copyright © 2025 Smart-Admin-Fast |
          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">ICP备XXXXXXX号-1</a>
        </p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import type { FormInstance } from 'element-plus'
import { ElMessage,ElNotification } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { useSettingsStore } from '@/store/modules/settings'
import Logo from '@/layouts/components/Sidebar/Logo.vue'
import settings from '@/config/settings'
import SliderCaptcha from '@/components/SliderCaptcha/index.vue'
import { User, Lock, Monitor, Histogram } from "@element-plus/icons-vue"

const QrCode = markRaw({
  name: 'QrCode',
  render() {
    return h('svg', {
      viewBox: '0 0 1024 1024',
      width: '1em',
      height: '1em',
      fill: 'currentColor'
    }, [
      h('path', {
        d: 'M468 128H160c-17.7 0-32 14.3-32 32v308c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V136c0-4.4-3.6-8-8-8zm-56 284H192V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm444-140H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h276c4.4 0 8-3.6 8-8V160c0-17.7-14.3-32-32-32zm-56 284H556V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM192 556v308c0 17.7 14.3 32 32 32h308c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8H160c-4.4 0-8 3.6-8 8zm56 284V556h220v284H192zm-64-220h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm500 220c0 4.4 3.6 8 8 8h108v108c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8H556c-4.4 0-8 3.6-8 8v332zm64-216h108v108H748V624z'
      })
    ])
  }
})

const userStore = useUserStore()
const settingsStore = useSettingsStore()
const loginFormRef = ref<FormInstance>()
const loading = ref(false)
const rememberMe = ref(false)
const loginType = ref('account')
const qrCodeUrl = ref('https://img.81gou.com/wechatQr.jpg')
const qrCodeExpired = ref(false)
const sliderCaptchaRef = ref()
const sliderVerified = ref(false)

const loginForm = reactive({
  username: 'admin',
  password: '123456',
  rememberMe: false,
  source: 'ADMIN'
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 ���字符', trigger: 'blur' }
  ]
}

const features = [
  { icon: 'Monitor', title: '简洁优雅', desc: '现代化界面设计' },
  { icon: 'Lock', title: '安全可靠', desc: '权限管理系统' },
  { icon: 'Histogram', title: '高性能', desc: '优雅的代码结构' }
]

// 3D轮播索引
const currentCardIndex = ref(0)

// 计算每个卡片的3D位置和样式
const getCardStyle = (index: number) => {
  const totalCards = features.length
  const anglePerCard = (2 * Math.PI) / totalCards

  // 计算相对当前卡片的偏移
  let offset = index - currentCardIndex.value
  if (offset < 0) offset += totalCards

  const angle = offset * anglePerCard
  const radius = 150 // 3D圆形半径

  // 计算3D位置
  const z = Math.cos(angle) * radius
  const y = Math.sin(angle) * radius

  // 计算缩放比例 - 靠近前方的卡片更大
  const scale = 0.7 + (z + radius) / (radius * 2) * 0.5

  // 计算透明度 - 后方卡片更透明
  const opacity = 0.3 + (z + radius) / (radius * 2) * 0.7

  // Z-index - 前方卡片层级更高
  const zIndex = Math.round(z + radius)

  return {
    transform: `translateY(${y}px) translateZ(${z}px) scale(${scale})`,
    opacity: opacity,
    zIndex: zIndex,
    transition: 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)'
  }
}

// 自动轮播
let carouselTimer: number
onMounted(() => {
  carouselTimer = window.setInterval(() => {
    currentCardIndex.value = (currentCardIndex.value + 1) % features.length
  }, 3000)
})

const isDark = computed(() => settingsStore.theme === 'dark')
const logoColor = computed(() => isDark.value ? '#8ada27' : '#409eff')

const toggleTheme = () => {
  const newTheme = isDark.value ? 'light' : 'dark'
  settingsStore.saveSettings({ theme: newTheme })
}

const switchLoginType = (type: string) => {
  loginType.value = type
}

const handleLogin = async () => {
  if (!loginFormRef.value) return
  if (!sliderVerified.value) {
    ElMessage.warning('请完成滑块验证')
    return
  }

  await loginFormRef.value.validate()
  loading.value = true
  userStore.login(loginForm).then(() => {
    router.push('/');
    ElMessage.success('登录成功')
  }).catch(() => {
    sliderCaptchaRef.value?.reset()
    sliderVerified.value = false
  }).finally(() => {
    loading.value = false;
  });
}

const handleSocialLogin = (type: string) => {
  ElNotification.success({
    title: '提示',
    message: '请稍候，正在紧张开发中',
    duration: 3000
  })
}

const refreshQrCode = async () => {
  qrCodeExpired.value = false
}

const handleSliderSuccess = () => {
  sliderVerified.value = true
}

// 粒子样式生成
const getParticleStyle = (index: number) => {
  const size = Math.random() * 4 + 2
  const left = Math.random() * 100
  const delay = Math.random() * 5
  const duration = Math.random() * 10 + 10

  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    animationDelay: `${delay}s`,
    animationDuration: `${duration}s`
  }
}

let qrCodeTimer: number
watch(loginType, (newVal) => {
  if (newVal === 'qrcode') {
    refreshQrCode()
    qrCodeTimer = window.setInterval(() => {
      // TODO: 检查二维码状态
    }, 3000)
  } else {
    clearInterval(qrCodeTimer)
  }
})

onUnmounted(() => {
  clearInterval(qrCodeTimer)
  clearInterval(carouselTimer)
})
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;

  &.dark {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }
}

// 波浪背景
.wave-background {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  animation: wave-motion 8s ease-in-out infinite;

  &.wave2 {
    animation: wave-motion 12s ease-in-out infinite reverse;
  }
}

@keyframes wave-motion {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-25px) translateY(10px);
  }
}

// 漂浮粒子
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: particle-float linear infinite;
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

// 主题切换按钮
.theme-toggle {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 100;
}

.theme-btn {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  font-size: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    transform: scale(1.1) rotate(180deg);
    background: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }
}

.icon-fade-enter-active,
.icon-fade-leave-active {
  transition: all 0.3s ease;
}

.icon-fade-enter-from {
  transform: rotate(-180deg) scale(0);
  opacity: 0;
}

.icon-fade-leave-to {
  transform: rotate(180deg) scale(0);
  opacity: 0;
}

// 登录包装器
.login-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 40px 20px;
  max-width: 1400px;
  width: 100%;
}

// 登录卡片
.login-card {
  width: 100%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 30px;
  padding: 50px 40px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: card-float 3s ease-in-out infinite;

  .dark & {
    background: rgba(30, 30, 46, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

@keyframes card-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

// 卡片头部
.card-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo-container {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.logo {
  position: relative;
  z-index: 2;
  //animation: logo-bounce 2s ease-in-out infinite;  //logo 旋转
}

@keyframes logo-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(180deg);
  }
}

.logo-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 2px solid var(--el-color-primary);
  border-radius: 50%;
  animation: ripple 2s ease-out infinite;

  &.ripple-delay {
    animation-delay: 1s;
  }
}

@keyframes ripple {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
  }
  100% {
    width: 120px;
    height: 120px;
    opacity: 0;
  }
}

.title {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 10px 0;
  letter-spacing: 2px;

  .dark & {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.subtitle {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0;
}

// 登录模式切换
.login-mode-switch {
  position: relative;
  display: flex;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 4px;
  margin-bottom: 30px;

  .dark & {
    background: rgba(255, 255, 255, 0.05);
  }
}

.mode-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
  font-size: 15px;
  color: var(--el-text-color-secondary);

  .el-icon {
    font-size: 18px;
  }

  &.active {
    color: white;
  }
}

.mode-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);

  &.slide-right {
    transform: translateX(calc(100% + 4px));
  }
}

// 表单样式
.login-form {
  .el-form-item {
    margin-bottom: 24px;
  }
}

.input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 16px;
  padding: 0 20px;
  border: 2px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .dark & {
    background: rgba(255, 255, 255, 0.05);
  }

  &:focus-within {
    border-color: var(--el-color-primary);
    background: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);

    .dark & {
      background: rgba(255, 255, 255, 0.08);
    }
  }
}

.input-icon {
  font-size: 20px;
  color: var(--el-text-color-secondary);
  margin-right: 12px;
}

.custom-input {
  :deep(.el-input__wrapper) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 14px 0;
  }
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.remember-checkbox {
  :deep(.el-checkbox__label) {
    color: var(--el-text-color-secondary);
    font-size: 14px;
  }
}

.forget-link {
  color: var(--el-color-primary);
  font-size: 14px;
  text-decoration: none;
  position: relative;
  transition: all 0.3s;

  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--el-color-primary);
    transition: width 0.3s;
  }

  &:hover::after {
    width: 100%;
  }
}

.login-btn {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(102, 126, 234, 0.4);

    &::before {
      width: 300px;
      height: 300px;
    }
  }

  &:active {
    transform: translateY(0);
  }
}

// 表单切换动画
.form-slide-enter-active,
.form-slide-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.form-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

// 二维码容器
.qrcode-container {
  padding: 20px 0;
}

.qrcode-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.qrcode-frame {
  position: relative;
  width: 240px;
  height: 240px;
  background: white;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

  .dark & {
    background: rgba(255, 255, 255, 0.05);
  }
}

.corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid var(--el-color-primary);

  &.top-left {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
  }

  &.top-right {
    top: 10px;
    right: 10px;
    border-left: none;
    border-bottom: none;
  }

  &.bottom-left {
    bottom: 10px;
    left: 10px;
    border-right: none;
    border-top: none;
  }

  &.bottom-right {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
  }
}

.qrcode-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scan-line {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--el-color-primary), transparent);
  box-shadow: 0 0 10px var(--el-color-primary);
  animation: scan 2s linear infinite;
}

@keyframes scan {
  0% {
    top: 20px;
  }
  50% {
    top: calc(100% - 20px);
  }
  100% {
    top: 20px;
  }
}

.qrcode-expired {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  .dark & {
    background: rgba(0, 0, 0, 0.95);
  }
}

.expired-icon {
  font-size: 48px;
  color: var(--el-color-warning);
}

.qrcode-tips {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--el-text-color-secondary);
  font-size: 14px;

  .tip-icon {
    font-size: 20px;
  }
}

// 社交登录
.social-login {
  margin-top: 40px;
}

.divider-line {
  position: relative;
  text-align: center;
  margin-bottom: 24px;

  span {
    position: relative;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--el-text-color-secondary);
    font-size: 13px;
    z-index: 1;

    .dark & {
      background: rgba(30, 30, 46, 0.95);
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--el-border-color);
    z-index: 0;
  }
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0, 0, 0, 0.05);

  .dark & {
    background: rgba(255, 255, 255, 0.05);
  }

  &:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  &.qq:hover {
    background: linear-gradient(135deg, #12b7f5 0%, #107ec5 100%);
  }

  &.gitee:hover {
    background: linear-gradient(135deg, #c71d23 0%, #a01419 100%);
  }

  &.wechat:hover {
    background: linear-gradient(135deg, #09bb07 0%, #078606 100%);
  }
}

// 功能特性展示 - 3D轮播
.features-showcase {
  width: 350px;
  height: 350px;
  flex-shrink: 0;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right:10% ;
}

.carousel-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.feature-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  width: 260px;
  margin-left: -130px;
  margin-top: -100px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 30px 24px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  pointer-events: none;

  .dark & {
    background: rgba(30, 30, 46, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }

  &.active {
    pointer-events: auto;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
    border-color: rgba(102, 126, 234, 0.5);
  }

  h3 {
    font-size: 18px;
    margin: 16px 0 8px 0;
    color: var(--el-text-color-primary);
    font-weight: 600;
  }

  p {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    margin: 0;
    line-height: 1.6;
  }
}

.feature-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  animation: feature-bounce 2s ease-in-out infinite;
}

@keyframes feature-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

// 底部版权
.login-footer {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.footer-content {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;

  a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.3s;

    &:hover {
      color: white;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .login-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .features-showcase {
    width: 100%;
    max-width: 480px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .feature-card {
    flex: 1;
    min-width: 140px;
  }
}

@media (max-width: 768px) {
  .login-wrapper {
    padding: 20px;
  }

  .login-card {
    padding: 40px 30px;
  }

  .features-showcase {
    flex-direction: column;
    max-width: 100%;
  }

  .feature-card {
    width: 100%;
  }
}
</style>
